<template>
	<div>
		<mainTop></mainTop>
		<div class="zhxxMiddleBox">
			<div class="lastestZhxx" v-if="newest">
				<div style="width: 486px;height: 596px;display: inline-block;float: left;">
				<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: this.newest.data.articleId} }">
					<img  :src="'https://zha.heavenk.com/prod-api'+this.newest.data.image" style="width: 100%;height: 100%;" alt="">
				</router-link>
				</div>
				<div class="lastestZhxx_content">
					<div style="margin-top: 60px;">
						<div style="font-size: 36px;font-weight: 600;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">最新展会信息</div>
						<div style="font-size: 36px;font-weight: 600;margin-top: 5px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Latest Exhibitions</div>
					</div>
					<div style="margin-top: 30px;font-size: 16px;line-height: 28px;overflow: hidden;height: 274px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
						{{ this.newest.data.articleSynopsis }}
						<!-- 据中商产业研究院数据库显示，近年来全国葡萄酒产量持续下降，由2016年的113.7万千升降至2020年的41.3万千升。数据显示，2021年达近年来产量最低值，2021年全国葡萄酒产量为26.8万千升，同比下降29.1%，产量持续下降。
					由于我国本土葡萄酒长期以来受到进口葡萄酒的冲击及2020年疫情期间节日聚会、
					家庭餐会均被取消，餐饮业完全停滞，导致葡萄酒的需求短期内大幅下降。
					2020年我国葡萄酒行业市场规模下滑至498.2亿元，2021年小幅度上涨至510.8亿元。
					预计2022年我国葡萄酒行业市场规模将进一步上升至587.2亿元。 -->
					
					</div>
					<div style="position: absolute;bottom: 60px;width: 122px;cursor: pointer;
					height: 45px;line-height: 45px; border: 2px solid #150e52;font-size: 19px;
					padding-left: 12px;font-weight: 600;letter-spacing: 2px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
						
						<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: this.newest.data.articleId} }" style="color: #150e52;text-decoration: none;">
						<!-- <a :href="'https://zh.heavenk.com/news/details.html?id='+this.newest.data.articleId" target="_blank" style="text-decoration: none;color: #150e52;"> -->
						了解更多<img src="../images/moreIcon.png" style="margin-left: 5px;margin-top: -3px;"/>
						<!-- </a> -->
						</router-link>
					</div>
				</div>
			</div>
			<div class="zhxx">
				<div class="zhxxTitle" @mouseleave="liHoverIndex = selectedLiHover" v-if="articleType">
					<span style="font-size: 36px;color: #150e52;float: left;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">展会信息</span>
					<ul style="float: right;">
						<li :class="{'liHover':liHoverIndex==index||selectedLiHover==index}" 
							@click="clickArticleType(index,item.dictSort),selectedLiHover=index"
							@mouseover="liHoverIndex = index"
							v-for="(item,index) in articleType.data.slice(0,5)"
							:key="index"
							>{{ item.dictLabel }}</li>
						<!-- <li :class="{'liHover':liHoverIndex==1||selectedLiHover==1}" @click="selectedLiHover=1"
							@mouseover="liHoverIndex = 1">投资</li>
						<li :class="{'liHover':liHoverIndex==2||selectedLiHover==2}" @click="selectedLiHover=2"
							@mouseover="liHoverIndex = 2">人物</li>
						<li :class="{'liHover':liHoverIndex==3||selectedLiHover==3}" @click="selectedLiHover=3"
							@mouseover="liHoverIndex = 3">精选</li>
						<li :class="{'liHover':liHoverIndex==4||selectedLiHover==4}" @click="selectedLiHover=4"
							@mouseover="liHoverIndex = 4">专栏</li> -->
					</ul>
				</div>
				<div class="zhxxContent" @mouseleave="moduleHoverIndex = selectedModuleHover">
					<div class="zhxxModule" :class="{'moduleHover':moduleHoverIndex==index||selectedModuleHover==index}" @click="selectedModuleHover=index"
							@mouseover="moduleHoverIndex = index"
							v-for="(item,index) in article.rows"
							:key="index"	
							style="overflow: hidden;"
						>
						<div style="width: 377px;height: 262px;float: left;">
							<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: item.articleId} }">
								<img :src="'https://zha.heavenk.com/prod-api'+item.image" style="width: 100%;height: 100%;" alt="">
							</router-link>
						</div>
						<div style="float: left;color: #150e52;width: 682px;margin-left: 21px;margin-top: 10px;">
							
							
							<div style="font-size: 19px;font-weight: 600; 
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;cursor: pointer;">
							<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: item.articleId} }" style="text-decoration: none;color: inherit;">
							{{ item.articleTitle }}
							</router-link>
							</div>
							
							<div style="height: 112px; font-size: 17px;
							font-family: Adobe 黑体 Std R;margin-top: 23px;letter-spacing: 1px;overflow: hidden;">
							<!-- 中商情报网讯：葡萄酒营养丰富，保健作用明显，
							一直以来都深受消费者青睐，但葡萄酒在我国市场份额仍然较低，
							市场发展潜力大。预计葡萄酒国产化将带动行业规模进一步扩大。 -->
							{{ item.articleSynopsis }}
							</div>
							<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: item.articleId} }" style="cursor: pointer; position: absolute;bottom: 80px;font-size: 19px;font-weight: 600;color: #150e52;text-decoration: none;">
							<!-- <div style="cursor: pointer; position: absolute;bottom: 80px;font-size: 19px;font-weight: 600;"> -->
								 查看详情<img src="../images/arrow.png" style="margin-top: -8px;margin-left: 5px;"/>
							<!-- </div> -->
							</router-link>
						</div>
						
					</div>
					<!-- <div class="zhxxModule" :class="{'moduleHover':moduleHoverIndex==1||selectedModuleHover==1}" @click="selectedModuleHover=1"
							@mouseover="moduleHoverIndex = 1">
						<div style="width: 377px;height: 262px;float: left;"><img src="../images/zhxxImg.png" style="width: 100%;" alt=""></div>
						<div style="float: left;color: #150e52;width: 682px;margin-left: 21px;margin-top: 10px;">
							<div style="font-size: 19px;font-weight: 600; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">2022年中国葡萄酒行业市场现状及发展趋势预测分析</div>
							<div style="height: 112px; font-size: 17px;
							font-family: Adobe 黑体 Std R;margin-top: 23px;letter-spacing: 1px;overflow: hidden;">
							中商情报网讯：葡萄酒营养丰富，保健作用明显，
							一直以来都深受消费者青睐，但葡萄酒在我国市场份额仍然较低，
							市场发展潜力大。预计葡萄酒国产化将带动行业规模进一步扩大。
							</div>
							<div style="position: absolute;bottom: 80px;font-size: 19px;font-weight: 600;">
								 查看详情<img src="../images/arrow.png" style="margin-top: -8px;margin-left: 5px;"/>
							</div>
						</div>
					</div>
					<div class="zhxxModule" :class="{'moduleHover':moduleHoverIndex==2||selectedModuleHover==2}" @click="selectedModuleHover=2"
							@mouseover="moduleHoverIndex = 2">
						<div style="width: 377px;height: 262px;float: left;"><img src="../images/zhxxImg.png" style="width: 100%;" alt=""></div>
						<div style="float: left;color: #150e52;width: 682px;margin-left: 21px;margin-top: 10px;">
							<div style="font-size: 19px;font-weight: 600; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">2022年中国葡萄酒行业市场现状及发展趋势预测分析</div>
							<div style="height: 112px; font-size: 17px;
							font-family: Adobe 黑体 Std R;margin-top: 23px;letter-spacing: 1px;overflow: hidden;">
							中商情报网讯：葡萄酒营养丰富，保健作用明显，
							一直以来都深受消费者青睐，但葡萄酒在我国市场份额仍然较低，
							市场发展潜力大。预计葡萄酒国产化将带动行业规模进一步扩大。
							</div>
							<div style="position: absolute;bottom: 80px;font-size: 19px;font-weight: 600;">
								 查看详情<img src="../images/arrow.png" style="margin-top: -8px;margin-left: 5px;"/>
							</div>
						</div>
					</div>
					<div class="zhxxModule" :class="{'moduleHover':moduleHoverIndex==3||selectedModuleHover==3}" @click="selectedModuleHover=3"
							@mouseover="moduleHoverIndex = 3">
						<div style="width: 377px;height: 262px;float: left;"><img src="../images/zhxxImg.png" style="width: 100%;" alt=""></div>
						<div style="float: left;color: #150e52;width: 682px;margin-left: 21px;margin-top: 10px;">
							<div style="font-size: 19px;font-weight: 600; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">2022年中国葡萄酒行业市场现状及发展趋势预测分析</div>
							<div style="height: 112px; font-size: 17px;
							font-family: Adobe 黑体 Std R;margin-top: 23px;letter-spacing: 1px;overflow: hidden;">
							中商情报网讯：葡萄酒营养丰富，保健作用明显，
							一直以来都深受消费者青睐，但葡萄酒在我国市场份额仍然较低，
							市场发展潜力大。预计葡萄酒国产化将带动行业规模进一步扩大。
							</div>
							<div style="position: absolute;bottom: 80px;font-size: 19px;font-weight: 600;">
								 查看详情<img src="../images/arrow.png" style="margin-top: -8px;margin-left: 5px;"/>
							</div>
						</div>
					</div> -->
					
				</div>
				
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;" v-if="total">
				<div style="height: 60px;float: right;margin-top: 0px;">
									 <el-pagination
									      @size-change="handleSizeChange"
									      @current-change="handleCurrentChange"
									      :current-page.sync="currentPage"
									      :page-size="10"
									      layout="prev, pager, next"
									      :total="this.total">
									    </el-pagination>
										<div class="el-pagination__jump">
											共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
												<input type="text" class="inputNum" v-model="pageInputNum"
												oninput="value=value.replace(/[^\d]/g,'');
												if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
												value= value.substr(1,1)}" >
										</div>
										页
										</div>
										
									<button class="button1" style=""  @click="changePage">确定</button>
								</div>
			</div>
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import axios from 'axios';
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
import { Loading } from 'element-ui';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data() {
	   	return{
			liHoverIndex:0,
			selectedLiHover:0,
			pageSize: 16,
			totalCount: 1,
			totalPageSize:1,
			pageInputNum: '',
			currentPage: 1,
			moduleHoverIndex:-1,
			selectedModuleHover:-1,
			newest:'',
			articleType:'',
			article:'',
			total:5,
			articleTypeNum:121,
			contentPerPage:{
					cid:0,
					status:30,
					pn:1,
					ps:4
			},
		};
	   },
	   created(){
			this.getNewest(121);
			this.getArticleType();
			this.getArticle(121);
	   },
	   methods:{
		   handleSizeChange(val) {
		   	console.log(`每页 ${val} 条`);
		   },
		   handleCurrentChange() {
		    //   this.contentPerPage.pn=this.currentPage;
		    //   contentList(this.contentPerPage).then(response => {
		    //           this.contentPerPageList = response.data;
		    //         });
				this.getArticle(this.articleTypeNum,this.currentPage)
			  
		   },
		   changeFirstPage(){
		   	this.currentPage=1;
		   	this.handleCurrentChange();
		   },
		   changeLastPage(){
		   	this.currentPage=this.totalPageSize;
		   	this.handleCurrentChange();
		   },
		   getTotalPageSize(){
		   	this.totalPageSize=this.totalCount/this.pageSize
		   },
		   changePage(){
		   	this.currentPage=parseInt(this.pageInputNum);
		   	this.handleCurrentChange();
		   },
		   getNewest(num){
				axios.get('https://zha.heavenk.com/prod-api/web/article/typeTime/'+num).then((res)=>{
                    this.newest=res.data
                })
				
		    },
			getArticleType(){
				axios.get('https://zha.heavenk.com/prod-api/web/dict/data/type/yzh_article_type').then((res)=>{
                    this.articleType=res.data
                })
			},
			getArticle(num,pnum){
				if(pnum===null)pnum=1
				axios.get('https://zha.heavenk.com/prod-api/web/article/id'+num+'?pageNum='+pnum+'&pageSize=10').then((res)=>{
                    this.article=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/10)
					// console.log(this.total);
					// console.log(this.totalPageSize);
                })
			},
			clickArticleType(index,sort){
				this.articleTypeNum=sort
				this.selectedLiHover=index
				this.getArticle(sort)
				this.getNewest(sort)
			}
	   }
	}
	
</script>

<style>
	.zhxxMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.lastestZhxx{
		width: 1140px;
		min-width: 1140px;
		height: 596px;
		background-color: #fff;
		margin: auto;
		margin-top: 55px;
	}
	.lastestZhxx_content{
		width: 580px;
		height: 596px;
		display: inline-block;
		float: left;
		color: #150e52;
		padding-left: 50px;
		position: relative;
	}
	.zhxx{
		width: 1140px;
		min-width: 1140px;
		margin: auto;
		margin-top: 60px;
		/* height: 1510px; */
		height: auto;
	}
	.zhxxTitle{
		width: 100%;
		height: 50px;
	}
	.zhxxTitle ul{
		height: 50px;
		line-height: 50px;
	}
	.zhxxTitle ul li{
		width: 80px;
		float: left;
		height: 30px;
		margin-top: 10px;
		line-height: 30px;
		margin-left: 5px;
		list-style: none;
		font-size: 18px;
		color: #150e52;
		text-align: center;
		cursor: pointer;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		/* background-color: #150e52; */
	}
	.liHover{
		color: #fff !important;
		background-color: #150e52 !important;
		border-radius: 15px;
	}
	.zhxxContent{
		width: 1140px;
		min-width: 1140px;
		    height: auto;
		margin-top: 30px;
	}
	.zhxxModule{
		width: 1080px;
		height: 262px;
		/* background-color: #fff; */
		padding: 30px 30px;
		position: relative;
		margin-bottom: 22px;
	}
	/* .zhxxModule:after{
		content: "";
		background-color: #fff;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 50%;
		left: 50%;
		z-index: -1;
		transition: 0.3s;
	} */
	   
	.moduleHover:after{
		background-color: #fff !important;
/* 		right: 0;
		left: 0; */
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>